<template>
  <!-- 登录功能 -->
  <div class="login-container">
    <div class="login-box">
      <h1>登录</h1>

      <!-- 新增的求职者和招聘者按钮 -->
      <div class="role-selection">
        <button type="button" @click="selectRole('job-seeker')">求职者</button>
        <button type="button" @click="selectRole('recruiter')">招聘者</button>
      </div>

      <form @submit.prevent="handleSubmit">
        <div>
          <label for="email">电子邮件：</label>
          <input type="email" id="email" v-model="email" required />
        </div>
        <div>
          <label for="password">密码：</label>
          <input type="password" id="password" v-model="password" required />
        </div>
        <button type="submit">登录</button>
      </form>
    </div>
    <div class="text-overlay">
      <h1>前 途 无 忧 招 聘</h1>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      email: '',
      password: '',
      role: '' // 新增一个角色标记
    };
  },
  methods: {
    selectRole(selectedRole) {
      this.role = selectedRole; // 设置角色
    },
    handleSubmit() {
      if (this.role === 'job-seeker') {
        // 求职者登录逻辑
        console.log('求职者登录', this.email, this.password);
        // 跳转到求职者界面
        this.$router.push({ name: 'job-search' });
      } else if (this.role === 'recruiter') {
        // 招聘者登录逻辑
        console.log('招聘者登录', this.email, this.password);
        // 跳转到招聘者界面
        this.$router.push({ name: 'company-management' });
      } else {
        console.log('请选择角色');
      }
    }
  }
};
</script>

<style scoped>
.login-container {
  background-image: url('@/assets/bg.jpg'); /* 背景图像路径 */
  background-size: cover; /* 背景图像覆盖整个容器 */
  background-repeat: no-repeat; /* 不重复背景图像 */
  height: 100vh; /* 使容器占满整个视口高度 */
  position: relative; /* 为绝对定位的子元素提供参照 */
}
.login-box {
  position: absolute; /* 绝对定位 */
  top: 10px; /* 距离顶部 10px */
  right: 100px; /* 距离右边 100px */
  background: rgba(255, 255, 255, 0.8); /* 背景色带透明度 */
  padding: 20px; /* 内边距 */
  border-radius: 8px; /* 圆角边框 */
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2); /* 阴影效果 */
  width: 300px; /* 固定宽度 */
}
.role-selection {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
}
.role-selection button {
  flex: 1;
  margin: 0 5px;
}
.text-overlay {
  position: absolute; /* 绝对定位 */
  top: 0; /* 距离顶部 20px */
  left: 20px; /* 距离左边 20px */
  color: rgb(255, 255, 255); /* 文本颜色为白色 */
  font-size: 1rem; /* 文本大小 */
  font-style: oblique; /* 斜体文本 */
}
label {
  display: block;
  margin-bottom: 8px;
  font-weight: bold;
}
input {
  width: 100%;
  padding: 8px;
  margin-bottom: 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
}
button {
  width: 100%;
  padding: 10px;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}
button:hover {
  background-color: #0056b3;
}
</style>